<template>
  <view class="phone-input-screen">

    <view class="phone-content">
      <view class="country-code-section">
        <input
          type="number"
          v-model="phoneNumber"
          placeholder="请输入手机号"
          class="phone-input"
          maxlength="11"
          :focus="phoneInputFocus"
        />
        <view class="clear-btn" v-if="phoneNumber" @click="clearPhone">
          <text>×</text>
        </view>
      </view>

      <button
        class="confirm-btn"
        :disabled="!isPhoneValid || !agreedToTerms"
        @click="sendVerificationCode"
      >
        确认登录
      </button>
    </view>
  </view>
</template>

<script>
import { authApi } from '@/request/api.js'

export default {
  data() {
    return {
      countryCodeIndex: 0,
      countryCodeList: ["+86", "+1", "+44"],
      phoneNumber: "",
      phoneInputFocus: false,
      agreedToTerms: false,
    };
  },
  
  computed: {
    isPhoneValid() {
      return (
        this.phoneNumber.length === 11 && /^1[3-9]\d{9}$/.test(this.phoneNumber)
      );
    },
  },

  onLoad(options) {
    // 从上一页面接收参数
    if (options.agreedToTerms) {
      this.agreedToTerms = options.agreedToTerms === 'true';
    }
  },

  onShow() {
    this.$nextTick(() => {
      this.phoneInputFocus = true;
    });
  },

  methods: {
    // 国家区号选择
    onCountryCodeChange(e) {
      this.countryCodeIndex = e.detail.value;
    },

    // 返回上一步
    goBack() {
      uni.navigateBack();
    },

    // 清空手机号
    clearPhone() {
      this.phoneNumber = "";
    },

    // 发送验证码
    async sendVerificationCode() {
      if (!this.isPhoneValid) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }

      try {
        // 显示加载提示
        uni.showLoading({
          title: "发送中...",
        });

        // 调用2506销售端发送短信验证码接口
        const smsData = {
          mobile: this.phoneNumber,
          verifyType: 101,
        };

        await authApi.sendSmsCode(smsData);
        
        uni.hideLoading();
        uni.showToast({
          title: "验证码已发送",
          icon: "success",
        });

        // 跳转到验证码页面，传递手机号和国家代码
        uni.navigateTo({
          url: `/pages/login/sms?phoneNumber=${this.phoneNumber}&countryCode=${this.countryCodeList[this.countryCodeIndex]}`
        });
        
      } catch (error) {
        uni.hideLoading();
        console.error("发送验证码失败:", error);
        uni.navigateTo({
          url: `/pages/login/sms?phoneNumber=${this.phoneNumber}&countryCode=${this.countryCodeList[this.countryCodeIndex]}`
        });
        uni.showToast({
          title: error.message || "发送验证码失败，请重试",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* 手机号输入页样式 */
.phone-input-screen {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  border-bottom: 2rpx solid #e5e5e5;
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 48rpx;
  color: #666;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.header-right {
  display: flex;
  gap: 32rpx;
}

.menu-btn,
.close-btn {
  font-size: 40rpx;
  color: #666;
}

.phone-content {
  flex: 1;
  padding: 80rpx 40rpx;
}

.country-code-section {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #e5e5e5;
  padding: 32rpx 0;
  position: relative;
}

.country-select {
  margin-right: 24rpx;
  padding: 16rpx;
  font-size: 32rpx;
  color: #333;
}

.phone-input {
  flex: 1;
  font-size: 32rpx;
  border: none;
  outline: none;
}

.clear-btn {
  padding: 16rpx;
}

.clear-btn text {
  font-size: 40rpx;
  color: #999;
}

.confirm-btn {
  width: 546rpx;
  padding: 32rpx;
  background: #715091;
  color: white;
  border: none;
  border-radius: 0rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 80rpx;
  line-height: 1;
}

.confirm-btn[disabled] {
  background: #ccc;
}
</style>
